<template>
  <div class="box">
    <div class="box1">
      <div class="box5">
        <h3>{{ text }}</h3>
        <p>更多</p>
      </div>
      <!-- <xiangqingnav :text="text" /> -->
      <p>
        <span>水费</span
        ><router-link to="" class="color">新增 &gt;</router-link>
      </p>
      <p>
        <span>电费</span
        ><router-link to="" class="color">新增 &gt;</router-link>
      </p>
      <router-link class="color" to="">新增自动缴费</router-link>
    </div>
    <div class="box2">
      <div v-for="(v, i) of arr" :key="i" @click="fun(v.id)">
        <h4 v-text="v.title"></h4>
        <p v-text="v.text"></p>
        <p><span v-text="v.text1"></span></p>
      </div>
    </div>
  </div>
</template>

<script>
// import xiangqingnav from "./XiangQingNavCom.vue";
export default {
  data() {
    return {
      text: "我的缴费",
      arr: [
        {
          id: 1,
          title: "电子社保卡",
          text: "社保卡的有效电子凭证",
          text1: "查询",
        },
        {
          id: 2,
          title: "医保电子凭证",
          text: "医保身份识别的线上凭证",
          text1: "展码",
        },
      ],
    };
  },
  methods: {
    fun(e) {
      switch (e) {
        case 2:
          this.$router.push("./yibao");
      }
    },
  },
  // components: {
  //   xiangqingnav,
  // },
};
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  justify-content: space-between;
  > div {
    width: 48%;
    height: 2rem;
    // background-color: skyblue;
    box-sizing: border-box;
  }
  > .box1 {
    border-radius: 0.1rem;
    padding: 0.08rem;

    text-align: center;
    background-color: #eff;
    > .box5 {
      margin: 0.1rem 0;
      display: flex;
      justify-content: space-between;
      > h3,
      > p {
        font-size: 0.14rem;
      }
    }

    > p {
      display: flex;
      justify-content: space-between;
      line-height: 0.5rem;
      padding: 0 0.05rem;
      > span,
      > a {
        font-size: 0.14rem;
      }
    }
    .color {
      font-size: 0.14rem;
      color: #136ab7;
    }
  }
  > .box2 {
    > div {
      height: 0.925rem;
      padding: 0.08rem;
      border-radius: 0.1rem;
      box-sizing: border-box;
      background-color: #eff;
      > h4 {
        line-height: 0.25rem;
        font-size: 0.14rem;
      }
      > p {
        font-size: 0.1rem;
        line-height: 0.2rem;
        margin-bottom: 0.08rem;
        > span {
          color: #136ab7;
          display: block;
          font-size: 0.1rem;
          background-color: #eee;
          width: 30%;
          text-align: center;
          line-height: 0.2rem;
          border-radius: 0.05rem;
        }
      }
    }
    > div:nth-child(1) {
      margin-bottom: 0.15rem;
    }
  }
}
</style>